<template>
  <div>
    <div id="main" style="width: 80%;height:400px;border: 1px solid #333;"></div>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <!-- <h3>66666</h3> -->
  </div>
</template>

<script>
import { mapGetters,mapActions } from 'vuex';
// 基于准备好的dom，初始化echarts实例

// 指定图表的配置项和数据

export default {
  computed:{
    ...mapGetters({
      list:"shopCate/list"
    })
  },
  methods: {
    ...mapActions({
      reqList: "shopCate/reqList",
    }),
  },
  mounted(){
    //请求list
    this.reqList();
    // 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById("main"));
  },
   watch: {
    list: {
      handler() {
        if (this.list.length > 0) {
          // 基于准备好的dom，初始化echarts实例
          var myChart = require("echarts").init(
            document.getElementById("main")
          );

          // 指定图表的配置项和数据
          var option = {
            color: ["#c23531", "#2f4554", "#61a0a8"],
            title: {
              text: "商品分类数据",
            },
            tooltip: {},
            legend: {
              data: ["子类数量"],
            },
            xAxis: {
              data: this.list.map(item=>item.catename),//['家用电器’，‘meihuznaghufu’]
            },
            yAxis: {},
            //数据
            series: [
              {
                name: "子类数量",
                type: "line",
                data:this.list.map(item=>item.children?item.children.length:0),//[3,7,4,0]
              },
            ],
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        }
      },
      deep: true,
    },
   },
};
</script>
<style>
</style>